<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>admin table</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>


<div class="layui-form" lay-filter="layuiadmin-app-form-list" style="margin: 10px 20px">
    <!--    <div onclick="openAdd()" style="margin-bottom: 10px">-->
    <!--        <button type="button" class="layui-btn">添加用户</button>-->
    <!--    </div>-->
    <div>
        <div class="layui-inline">
            <select id="searchStatus" name="status" lay-verify="" lay-search>
                <option value="3" selected>请选择申请状态</option>
                <option value="0" >待审核</option>
                <option value="1">通过</option>
                <option value="2">拒绝</option>
            </select>
        </div>
        <button class="layui-btn" id="search" data-type="reload">搜索</button>
    </div>
    <table id="list" lay-filter="list"></table>

</div>
<div id="openAdd" class="layui-row" hidden>
    <div style="margin-left: 10%;margin-top: 20px;width: 80%">
        <form lay-filter="addForm" class="layui-form" action="">
            <input name="id" type="number" hidden/>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="userTel" required lay-verify=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required lay-verify=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="realName" required lay-verify=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-block">
                    <input type="text" name="birthday" required lay-verify=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">余额</label>
                <div class="layui-input-block">
                    <input type="number" name="balance" required lay-verify=""
                           onkeyup="value=value.replace(/^(0+)|[^\d.]+/g,'')"
                           value="0" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <select name="sex" lay-verify="" lay-search>
                        <option value="3" selected>保密</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="isBlack" value="1" title="正常" checked>
                    <input type="radio" name="isBlack" value="2" title="拉黑">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="submit" type="button" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script src="../layui/layui.js"></script>

<script>
    var tree;
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#list',
            // height: 312,
            url: 'applyList?needData=1', //数据接口//
            request: {
                limitName: 'size' //每页数据量的参数名，默认：limit
            },
            parseData: function (res) { //res 即为原始返回的数据
                if (res.code == 200)
                    res.code = 0
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            page: true,//开启分页
            cols: [[ //表头
                {field: 'id', title: '用户ID', width: '100'},
                {field: 'userTel', title: '手机号', width: '150'},
                {field: 'email', title: '邮箱', width: '150'},
                {field: 'apply_content', title: '申请内容', width: '150'},
                {
                    field: 'status', title: '审核状态', width: '100', templet: function (d) {
                        show = '异常'
                        if (d.status == 0)
                            show = '待审'
                        if (d.status == 1)
                            show = '通过'
                        if (d.status == 2)
                            show = '拒绝'
                        return show
                    }
                },
                {field: 'refuse_reason', title: '驳回原因', width: '100'},
                {field: 'create_time', title: '创建时间', width: '200'},
                {field: 'update_time', title: '更新时间', width: '200'},
                {
                    fixed: 'right', title: '操作', width: '200', templet: function (d) {
                        show = ''
                        if (d.status == 0) {
                            show = '<a class="layui-btn layui-btn-xs" lay-event="allow">通过</a>\n' +
                                '    <a class="layui-btn layui-btn-xs" lay-event="refuse">拒绝</a>\n'
                        }
                        show = show + '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
                        return show
                    }
                }
            ]],
            text: {
                none: '暂无数据' //默认：无数据。
            },
            defaultToolbar: ['filter'],
        })
        $('#search').click(function () {
            var status = $('#searchStatus').val()
            table.reload('list', {
                url: 'applyList?needData=1&keyword=' + keyword + '&phone=' + phone, //数据接口//
            });
        })
        table.on('tool(list)', function (obj, table) {
            // var data = obj.data; //获得当前行数据
            // if (layEvent == 'edit') {
            //     window.location = 'editPsw.html?aid=' + data.admin_id
            // }
            switch (obj.event) {
                case 'allow':
                    tableSingleAttributeUpdate(obj, 'status', 1)
                    break;
                case 'refuse':
                    tableSingleAttributeUpdate(obj, 'status', 2)
                    break;
                case 'del':
                    layer.confirm('确定删除该申请？', function (index) {
                        obj.data['deleted'] = 1
                        edit(obj.data, function (res) {
                            if (res.code != 200) {
                                layer.msg(res.error)
                            } else {
                                layer.msg('修改成功')
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                            }
                        })
                    });
                    break;

            }
        });

    });

    function tableSingleAttributeUpdate(obj, field, value) {
        obj.data[field] = value
        console.log(obj.data)
        edit(obj.data, function (res) {
            if (res.code != 200) {
                layer.msg(res.error)
            } else {
                layer.msg('修改成功')
                location.reload()
            }
        })
    }

    function edit(data, callback) {
        $.ajax({
            url: 'editApply',
            type: 'POST',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (callback != undefined) {
                    callback(res)
                } else {
                    if (res.code != 200) {
                        layer.msg(res.error)
                    } else {
                        layer.msg('修改成功')
                    }
                }
            },
        });
    }

    function openAdd() {
        layer.open({
            type: 1,
            content: $('#openAdd'),
            area: ["500px", "500px"],
            title: '添加用户',
            anim: 1
        });
        $('button[type=reset]').click()
    }

    function openEdit(data) {
        layer.open({
            type: 1,
            content: $('#openAdd'),
            area: ["500px", "500px"],
            title: '编辑用户信息',
            anim: 1,
            success: function () {
                form = layui.form
                form.val('addForm', data)
            }
        });
    }

    //Demo
    layui.use('form', function () {
        var form = layui.form;

        $('#submit').on('click', function () {
            var formData = form.val('addForm')
            if (formData['id'] <= 0)
                delete formData['id']
            else {
                edit(formData, function (res) {
                    if (res.code != 200) {
                        layer.msg(res.error)
                    } else {
                        layer.msg('修改成功')
                        location.reload()
                    }
                })
                return
            }
            $.ajax({
                url: 'addUser',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function (res) {
                    if (res.code != 200) {
                        layer.msg(res.error)
                    } else {
                        layer.msg('添加成功')
                        location.reload();
                    }
                }, error: function (res) {
                    layer.msg()
                }
            })
        })
    });

    /*查看大图*/
    function openImg() {
        var idBar = '#showImg';
        var src = $(idBar)[0].src;
        var width = $(idBar).width();
        var height = $(idBar).height();
        var scaleWH = width / height;
        var bigH = 550;
        var bigW = scaleWH * bigH;
        if (bigW > 1000) {
            bigW = 1000;
            bigH = bigW / scaleWH;
        } // 放大预览图片
        parent.layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true,
            area: [bigW + 'px', bigH + 'px'], //宽高
            content: '<img width="' + bigW + '" src="' + src + '" />'
        });
    }
</script>
</body>
</html>
